<template>
  <div class="table-content-box" id="menu-left-btn-xe920">
    <div class="content-box">
      <div class="table-box">
        <t-table
          maxHeight="50vh"
          :loading="loading"
          row-key="id"
          :data="props.tabDatas"
          :columns="columns"
          :selected-row-keys="selectedRowKeys"
          select-on-row-click
          @select-change="rehandleSelectChange"
          :table-content-width="tableLayout === 'fixed' ? undefined : '1200px'"
          :resizable="false"
        >
          <template #isDisable="{ row }">
            <t-popup :content="row.message" destroy-on-close v-if="row.isDisable">
              <t-tag style="border: 0px; cursor: pointer; margin-left: -35px" variant="outline"
                ><ErrorCircleFilledIcon
              /></t-tag>
            </t-popup>
          </template>
          <template #coverUrl="{ row }">
            <img
              :src="$filters.getLinkUrl(row.coverUrl, webUrls)"
              alt=""
              fit="cover"
              position="center"
              v-if="row.coverUrl"
              class="avator-box"
            />
            <div class="avator-box avator-box-null" v-else></div>
          </template>
          <template #typeId="{ row }">
            <t-select :disabled="true" :borderless="true" v-model="row.typeId" placeholder="未添加类型">
              <t-option v-for="item in props.tabType.select3" :key="item.id" :label="item.text" :value="item.id" />
            </t-select>
          </template>
          <template #ageId="{ row }">
            <div class="cascader-boxs">
              <t-cascader
                :disabled="true"
                :borderless="true"
                placeholder="未添加年代"
                v-model="row.ageId"
                :options="props.tabType.select4"
                :keys="{
                  value: 'id',
                  children: 'children',
                  label: 'text',
                }"
                clearable
                @change="onChange"
              />
            </div>
          </template>
          <template #SpecificAge="{ row }">
            <div class="text-ov-hid-style">
              {{ row.SpecificAge ? row.SpecificAge : '--' }}
            </div>
          </template>
          <!-- <template #size="{ row }">
            <div class="text-ov-hid-style">{{ row.size ? row.size : '--' }}</div>
          </template> -->
          <template #levelId="{ row }">
            <t-select :disabled="true" :borderless="true" v-model="row.levelId" placeholder="未添加级别">
              <t-option v-for="item in props.tabType.select1" :key="item.id" :label="item.text" :value="item.id" />
            </t-select>
          </template>
          <template #publishStatus="{ row }">
            <div :class="{ 'style-publish': row.openStatus !== 0, 'style-no-publish': row.publishStatus === 0 }">
              {{ row.openStatus === 1 ? row.companyName : row.openStatus === 2 ? '私有库' : row.companyName }}
            </div>
          </template>
          <template #operation="{ row }" v-if="props.right">
            <div class="hw-box-style-flex table-menu">
              <div class="operation-box" :class="{ 'operation-box-lock': row.openStatus == 1 || !row.isCompanyUser }">
                <div class="operation-box">
                  <span
                    v-if="row.isCompanyUser && row.openStatus !== 1"
                    class="hw-click-cursor"
                    :class="{ 'isEdit-role': row.isCompanyUser }"
                    @click.stop="recovery(row.id, 2, row.isCompanyUser)"
                    >编辑
                  </span>
                  <t-popup
                    v-else
                    attach="#menu-left-btn-xe920"
                    class="placement"
                    :content="!row.isCompanyUser ? '非本单位展品无法编辑' : '已授权展品无法编辑'"
                    placement="top"
                  >
                    <span class="hw-click-cursor-lock" @click.stop="stopFn">编辑 </span>
                  </t-popup>
                </div>
                <!-- <span class="hw-click-cursor" @click="recovery(row.id, 2, row.isCompanyUser)">编辑 </span> -->
                <!-- :class="{ 'isEdit-role': !row.isCompanyUser }" -->
              </div>
              <div class="operation-box" @click.stop="SettagId(row.id)">
                <span class="hw-click-cursor">标注 </span>
                <!-- :class="{ 'isEdit-role': !row.isCompanyUser }" -->
              </div>
              <div class="operation-box" style="margin-right: 8px">
                <a
                  class="hw-click-cursor"
                  target="_blank"
                  :href="doorUrl + 'portal/visitExhibitsInfo?showpieceid=' + row.id"
                  >查看
                </a>
              </div>
              <div class="operation-box">
                <span class="hw-click-cursor" @click.stop="removeExhibits(row.id)">移除</span>
              </div>
            </div>
          </template>
          <template #empty>
            <div class="hw-flex-style-c-c-c hw-box-style-flex-clm null-box-style">
              <img
                class="null-img-1"
                src="https://static-1316349889.cos.ap-shanghai.myqcloud.com/assets/img/exhibitNull.png"
                alt=""
              />
              <span class="null-title-1">暂无展品</span>
              <span class="null-title-2">快去添加展品吧</span>
            </div>
          </template>
        </t-table>
      </div>
    </div>
    <addExbition
      v-if="editexbitionShow"
      :visible="editexbitionShow"
      :id="editexbitionId"
      @closeMdeol="closeMdeol"
      @addSuccess="addSuccess"
    />
    <messageModel
      submitText="删除"
      title="提示"
      :visible="visible1"
      problem="确定移除此展品？"
      message="移除后可再次添加展品"
      @closeClick="closeClick"
      @submitClick="submitClick"
    />
    <tagModel :visible="tagShow" :id="tagId" v-if="tagShow" @close="tagclose" @submit="tagsubmit" />
  </div>
</template>
<script setup lang="ts">
// @ts-nocheck
import tagModel from '@/components/tagModel/tabModel.vue';
import addExbition from '@/components/addExbition/addExbition.vue';
import { doorUrl } from '@/utils/minxin';
import { ErrorCircleFilledIcon } from 'tdesign-icons-vue-next';
import { listdata, delColumn1 } from '../../../../Exhibits/data';
import { column } from './data';
import { MessagePlugin } from 'tdesign-vue-next';
import messageModel from '@/components/messageModel/index.vue';
import { exhibitRemove } from '@/api/desgin/desgin';
import { urls, getLinkUrl } from '@/utils/request/upload';
import { LockOnIcon } from 'tdesign-icons-vue-next';
import { ref, computed, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { useProjectStore } from '@/store';

const webUrls: string = '?imageView2/1/w/48/h/48/format/webp';
const store = useProjectStore();
const props = defineProps({
  tabType: {
    type: Object,
  },
  tabDatas: {
    type: Array,
  },
  parmas: {
    type: Object,
  },
  right: {
    type: Boolean,
  },
});
const tagId = ref(0);
const tagShow = ref(false); //标签树弹框
const editexbitionId = ref(0); //展品id
const editexbitionShow = ref(false); //录入展品弹框
const loading = ref(false);
const router = useRouter();
const delId = ref(0);
const emit = defineEmits(['addExhibit', 'remove']);
const total = ref(0);
const exhibitId = ref(0);
const visible1 = ref(false);
const tableLayout = ref('fixed');
const emptyData = ref(false);
const tabDatas = ref([]);

const columns = computed(() => {
  if (!props.right) {
    return delColumn1;
  } else {
    return column;
  }
});
const selectedRowKeys = ref([]);

const changeVlaue = (e: any) => {
  parmas.menu = e;
  // init();
};
const stopFn = () => {};
const closeMdeol = () => {
  //展品添加弹框关闭
  editexbitionShow.value = false;
};
const SettagId = (id: number) => {
  tagId.value = id;
  tagShow.value = true;
};
const addSuccess = async (id: number, type?: number) => {
  editexbitionShow.value = false;
  MessagePlugin.success(`修改成功`);
  //展品添加弹框打开
};
const removeExhibits = async (e: number) => {
  exhibitId.value = e;
  visible1.value = true;
};
const publish = (e: number) => {
  //发布展品
  exhibitPublish(e).then((res) => {
    if (res.statusCode == 200) {
      MessagePlugin.success(`发布成功`);
      init();
    } else {
      MessagePlugin.error(res.errors);
    }
  });
};
const recovery = (e?: number, type: number, role: boolean) => {
  if (type == 2 && !role) {
    return;
  }
  editexbitionId.value = e;
  editexbitionShow.value = true;
  // router.push({
  //   path: '/prijectMenu/lookExhibit',
  //   query: {
  //     id: e,
  //     status: type,
  //   },
  // });
};
const withdrawn = (e: number) => {
  exhibitWithdrawn(e).then((res: any) => {
    if (res.statusCode == 200) {
      MessagePlugin.success(`撤回成功`);
      // init();
    } else {
      MessagePlugin.error(res.errors);
    }
  });
};

const moveInfo = (e: number) => {
  //移动展品
  exhibitMove(e).then((res: any) => {
    if (res.statusCode == 200) {
      MessagePlugin.success(`移动成功`);
      init();
    } else {
      MessagePlugin.error(res.errors);
    }
  });
};
const onChange = (pageInfo) => {};
const addaddExhibits = (e: number) => {
  //新建展品
  //   router.push({ path: '/Exhibits/addExhibitLibrary', query: { type: e } });
};

const rehandleSelectChange = (value, { selectedRowData }) => {
  //恢复列表选项
  selectedRowKeys.value = value;
  emit('addExhibit', selectedRowKeys.value);
};
const closeClick = () => {
  visible1.value = false;
};
const submitClick = async () => {
  //删除展品
  try {
    if (loading.value) {
      return;
    }
    loading.value = true;
    let res = await exhibitRemove(localStorage.getItem('projectId'), exhibitId.value);
    if (res.statusCode == 200) {
      MessagePlugin.success(`删除成功`);
      emit('remove');
    }
    loading.value = false;
    visible1.value = false;
  } catch {
    loading.value = false;
  }
  // visible1.value = false;
  // exhibitDisable(delId.value).then((res: any) => {
  //   if (res.statusCode == 200) {
  //     MessagePlugin.success(`删除成功`);
  //     init();
  //   }
  // });
};
const tagclose = () => {
  tagShow.value = false;
};
const tagsubmit = () => {
  tagShow.value = false;
};
</script>

<style lang="less" scoped>
@import '../../../../Exhibits/index.less';
.content-box {
  width: 100%;
  // max-width: 70vw;
  :deep(.t-input.t-is-disabled) {
    background: #fff;
  }
  .table-box {
    min-height: 30vh;
    margin: 0;
  }
  :deep(.t-input.t-is-disabled .t-input__inner) {
    color: rgba(0, 0, 0, 0.9);
  }
  :deep(.t-select.t-select-input--borderless .t-select__right-icon) {
    display: none;
  }
  :deep(.t-cascader .t-fake-arrow) {
    display: none;
  }
  :deep(.t-select-input--borderless .t-input) {
    border: none;
  }
}
.no-click-color {
  color: #dcdcdc;
}
.isEdit-role {
  color: #e62b17;
}
.t-table {
  border: 1px solid #e7e7e7;
  border-bottom: 0;
}
.operation-box-lock {
  cursor: not-allowed;
  span {
    cursor: not-allowed;

    color: #ffa994;
  }
  a {
    cursor: not-allowed;

    color: #ffa994;
  }
}
.operation-box {
  display: flex;
  // justify-content: center;
  align-items: center;

  .hw-click-cursor-lock {
    color: #ffa994 !important;
  }
}
.table-menu {
  justify-content: space-between;
}
#menu-left-btn-xe920 {
  :deep(.t-popup__content) {
    background-color: #333;
    color: #fff;
    border-color: #333;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
    padding: 4px 8px;
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    line-height: 22px;
  }
  :deep(.placement) {
    // border-color: #333;
    background: transparent !important;
  }
  :deep(.t-popup[data-popper-placement^='left'] .t-popup__arrow::before) {
    background-color: #333;
    // border-color: #333;
  }
  :deep(.t-popup__arrow::before) {
    background-color: #333;
  }
}
:deep(.t-input.t-is-disabled) {
  border: none;
  box-shadow: none;
}
:deep(.t-input__wrap) {
  border: none;
  box-shadow: none;
}
:deep(.t-input) {
  border-color: transparent !important;
}
.cascader-boxs {
  :deep(.t-select-input) {
    border: none;
    box-shadow: none;
  }
}
</style>
